<template>
  <transition name="fade" mode="out-in">
    <div class="box">
      <van-nav-bar
        title="添加业务员"
        left-arrow
        @click-left="onClickLeft"
      />
      <div class="content">
        <div class="content-tip">
          <img src="@/assets/icon_prompt.png">
          <span>本项所有信息都为必填项</span>
        </div>
        <div class="content-item">
          <div class="item-title">
            业务员基本信息
          </div>
          <van-field class="item-input" v-model="form.userName" placeholder="人员姓名" />
          <van-field class="item-input" v-model="form.code" placeholder="推荐码(字母数字组合)" />
          <van-field 
            class="item-input" 
            v-model="form.phoneNum" 
            placeholder="手机号" 
            icon="question"
            @click-icon="clickIcon" 
          />
        </div>
        <div class="content-item">
          <div class="item-title">
            分成比例
            <span class="item-title-tip">(输入整数)</span>
            <van-icon name="question" class="item-title-icon" color="#969799" @click="clickTitleIcon" />
          </div>
          <van-row gutter="40">
            <van-col span="12">
              <van-field
                v-model.number="form.firstPersent"
                type="number"
                placeholder="我的分成比例"
                class="item-input"
              >
                <img src="@/assets/persent.png" slot="icon" style="width: 15px;">
              </van-field>
            </van-col>
            <van-col span="12">
              <van-field
                v-model.number="form.secondPersent"
                type="number"
                placeholder="二级业务员比例"
                class="item-input"
              >
                <img src="@/assets/persent.png" slot="icon" style="width: 15px;">
              </van-field>
            </van-col>
          </van-row>
          <van-button size="large" class="field-submit" @click="clickNext">下一步</van-button>
        </div>
      </div>

      <!-- 点击下一步 -->
      <van-popup v-model="showPopNext" position="left" class="pop-next" :overlay="false">
        <van-nav-bar
          title="添加业务员"
          left-arrow
          @click-left="onClickNextLeft"
        />
        <div class="content">
          <div class="content-item" style="margin-top: 0;">
            <div class="item-title">
              资质信息
            </div>
            <van-uploader :after-read="onReadLicense" accept="image/png, image/jpeg, image/jpg" class="upload-container">
              <div class="upload-box">
                <img v-if="imgLicenseBase64" :src="imgLicenseBase64" class="upload-img">
                <img src="@/assets/icon_add.png">
                <span>添加营业执照</span>
              </div>
            </van-uploader>
            <van-uploader :after-read="onReadPermit" accept="image/png, image/jpeg, image/jpg" class="upload-container">
              <div class="upload-box">
                <img v-if="imgPermitBase64" :src="imgPermitBase64" class="upload-img">
                <img src="@/assets/icon_add.png">
                <span>添加开户许可证</span>
              </div>
            </van-uploader>
          </div>

          <div class="content-item">
            <div class="item-title">
              基本信息
            </div>
            <van-field class="item-input" v-model="form.userName" placeholder="公司名称" />
            <van-field class="item-input" v-model="form.code" placeholder="联系人" />
            <van-field class="item-input" v-model="form.userName" placeholder="联系方式" />

            <div class="section-title">
              联系地址
            </div>
            <van-field class="item-input-textarea" rows="3" v-model="form.msg" type="textarea" placeholder="输入详细地址" />
          </div>
          <van-button size="large" class="field-submit" style="margin-top: 23px;" @click="clickSubmit">提交审核</van-button>
        </div>
      </van-popup>
    </div>
  </transition>
</template>

<script>
import { Button, NavBar, Field, Dialog, Icon, Row, Col, Popup, Uploader } from 'vant';
export default {
  components: {
    [Button.name]: Button,
    [NavBar.name]: NavBar,
    [Field.name]: Field,
    [Dialog.name]: Dialog,
    [Icon.name]: Icon,
    [Row.name]: Row,
    [Col.name]: Col,
    [Popup.name]: Popup,
    [Uploader.name]: Uploader,
  },
  data () {
    return {
      showPopNext: false,
      form: {},
      imgLicenseBase64: '',
      imgPermitBase64: ''
    }
  },
  mounted() {

  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onClickNextLeft() {
      // 点击pop中的后退按钮
      this.showPopNext = false
    },
    clickIcon() {
      Dialog.alert({
        title: '关于手机号',
        message: `
          <p>· 手机号已绑定折折仓：
            填写手机号后，可直接登录折折仓APP查看分成数据。</p>
          <p>· 手机号未绑定折折仓：
            填写手机号后，需要在如下链接中进行登录。</p>
          <router-link to="https://www.baidu.com">http://***********.com</router-link>
        `
      }).then(() => {
        // on close
      })
    },
    clickTitleIcon() {
      Dialog.alert({
        title: '关于分成比例',
        message: `
          <p>分成计算公式为：</p>
          <p>。。。。。。。</p>
        `
      }).then(() => {
        // on close
      })
    },
    clickNext() {
      // 点击下一步
      this.showPopNext = true
    },
    onReadLicense(file) {
      // 上传图片回调 添加营业执照
      this.imgLicenseBase64 = file.content
    },
    onReadPermit(file) {
      // 上传图片回调 添加开户许可证
      this.imgPermitBase64 = file.content
    },
    clickSubmit() {
      // 提交审核
      
      // 成功回调
      Dialog.alert({
        title: '提交成功',
        message: `
          <p>业务员资质已提交后台审核，一旦审核通过，推荐码即可生效。
            您可以在业务员列表中查看审核状态</p>
        `
      }).then(() => {
        // on close
        this.$router.push('/salesman-management')
      })
    }
  },
}
</script>

<style scoped>
.box {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #fff;
  color: #38393A;
}
.content {
  padding: 16px;
}
.content-tip {
  display: flex;
  align-items: center;
  width: 168px;
  padding: 6px 8px;
  background-color: #FFB8B8;
  border-radius: 4px;
  box-shadow: 0px 2px 8px rgba(255, 184, 184, 0.5);
}
.content-tip img {
  width: 16px;
  margin-right: 4px;
}
.content-tip span {
  font-size: 12px;
  line-height: 18px;
  color: #fff;
}
.content-item {
  margin-top: 26px;
}
.item-title {
  position: relative;
  font-size: 16px;
  line-height: 22px;
  font-weight: bold;
}
.item-title-tip {
  font-size: 12px;
  line-height: 18px;
  color: #999999;
  font-weight: normal;
}
.item-title-icon {
  position: absolute;
  right: 0;
}
.item-input {
  padding: 10px 0;
  margin-top: 22px;
  border-bottom: 1px solid #E8EAEF;
}
.item-input-textarea {
  background-color: #ECECEC;
  border-radius: 2px;
}
.field-submit {
  border-radius: 5px;
  color: #fff;
  background-color: #FB999A;
  margin-top: 75px;
}
.pop-next {
  width: 100%;
  height: 100vh;
  overflow: auto;
}
.upload-container {
  margin: 10px 16px 0 0; 
  overflow: hidden;
  border-radius: 4px;
}
.upload-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 115px;
  height: 77px;
  border: 1px dashed #999999;
  border-radius: 4px;
  overflow: hidden;
}
.upload-box img {
  width: 24px;
  height: 24px;
}
.upload-box span {
  font-size: 12px;
  line-height: 18px;
  margin-top: 10px;
}
.upload-box .upload-img {
  position: absolute;
  width: 100%;
  height: auto;
}
.section-title {
  font-size: 14px;
  line-height: 20px;
  padding: 10px 0;
  color: #888888;
}
</style>
